<template>
	<view class="container">
		<view class="main">
			<view class="add_main">
				<!-- <view class="temp_bg">
					<view class="left">
						<image class="temp_icon" src="/static/images/two.png"></image>
						<text class="temp_text">起始路线</text>
					</view>
				</view> --><!-- 发货模板 end -->
				<view class="add-bg">
					<view class="section line_bottom">
						<view class="sec_left">
							<view class="sec_l_icon">起</view>
							<yhdslplace @change="changeAddress">
								<view class="sec_l_text" v-if="place == ''">请选择出发城市</view>
								<view class="sec_l_text" v-else>{{place}}</view>
							</yhdslplace>
						</view>
					</view><!--section end -->
					<view class="section">
						<view class="sec_left">
							<view class="sec_l_icon_org">终</view>
							<yhdslplace @change="changeAddress2">
								<view class="sec_l_text" v-if="place2 == ''">请选择目的城市</view>
								<view class="sec_l_text" v-else>{{place2}}</view>
							</yhdslplace>
						</view>
					</view><!--section end -->
				</view><!--add-bg end-->
			</view><!--add_main end-->
			<view class="goods_bg">
				<view class="goods_bg_left">
					<text class="red">*</text><text class="text">时间</text>
				</view>
				<view class="goods_bg_right">
					<!-- <text class="goods_text" v-if="start_time != ''">{{start_time}}</text>
					<text class="goods_text" v-else>请选择出发时间</text> -->
					<uni-datetime-picker
									type="datetime"
									v-model="start_time"
									@change="changeStartTime"
									:border="false"
									:hide-second="true"
									:clear-icon="false"
									:calendarIcon="false"
								/>
					<image class="goods_arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--goods_bg end-->
			
			<view class="goods_bg">
				<view class="goods_bg_left">
					<text class="red">*</text><text class="text">车型</text>
				</view>
				<view class="goods_bg_right">
					<!-- <text class="goods_text" v-if="goods_info_show == ''">请选择车型</text> -->
					<!-- <text class="goods_text" v-else>{{goods_info_show}}</text> --> 
					
					<picker @change="bindPickerChange" :value="index" :range="cars">
						<view class="goods_text" v-if="brand==''">请选择</view>
						<view class="goods_text" v-else>{{cars[index]}}</view>
					</picker>
					<image class="goods_arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--goods_bg end-->
			
			<view class="bottom_bg">
				<view class="num_bg">
					<view class="title_bg"><text class="star">*</text><text class="name">余座</text></view>
					<view class="section">
						<view class="minus" @click="minusEvent()">-</view>
						<input  class="num" type="number" value="1" v-model="num"/>
						<view class="add" @click="addEvent()">+</view>
					</view>
				</view>
			</view><!--bottom_bg end-->
			<view class="goods_bg">
				<view class="goods_bg_left">
					<text class="red">*</text><text class="text">A费</text>
				</view>
				<view class="goods_bg_right">
					<input class="input" maxlength="5" type="number" v-model="amount" placeholder="请输入A费"/>
					<view class="unit">元</view>
				</view>
			</view><!--goods_bg end-->
			
			<view class="remark_bg">
				<view class="up">
					<text class="red">*</text><text class="text">备注</text>
				</view>
				<view class="down">
					<view class="down_bg">
						<textarea v-model="remark" class="textarea" placeholder="请输入备注信息"></textarea>
					</view>
				</view>
			</view><!--goods_bg end-->
			<view class="protocol_bg">
				<image class="radio" @click="clickProtocol" v-if="check == false" src="../../../static/images/radio_normal.png"></image>
				<image class="radio" @click="clickProtocol" v-else src="../../../static/images/radio_selected.png"></image>
				<view class="text">我已阅读并同意出行拼车</view>
				<view class="role" @click="gotoProtocol()">《出行协议》</view>
			</view><!--protocol_bg end-->
		</view><!--main end-->
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">确认发布</view>
		</view>
		
		
		<uni-popup ref="timepop" class="popup-cls2">
			<view class="pop-info">
				<view class="pop-top">
					<view class="cancel" @click="cancelTime()">
						取消
					</view>
					<view class="title">
						出发时间
					</view>
					<view class="confirm" @click="confirmTime()">
						确定
					</view>
				</view>
				<view class="center"> 
					<view class="pop-content">
						<scroll-view class="left" scroll-y="true">
							<view class="section" @click="selectDate(item)" :class="left_current==item?'selected':''" v-for="item in leftDate">{{item}}</view>
						</scroll-view>
						<scroll-view class="right" scroll-y="true">
							<view class="section" @click="selectTime(item)" :class="right_current==item?'selected':''" v-for="item in rightTime">{{item}}</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {car_list,publish} from '@/api/travel.js';
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';
	export default {
		components: {
			yhdslplace
		},
		data() {
			return {
				start_time:'',//出发时间
				place:'',//
				place2:'',//
				index:0,
				cars:[],
				data:[],
				brand:'',
				amount:0,//价格
				remark:'',//备注
				num:1,//余座
				leftDate:[],//左边日期
				left_current:'',//左边日期
				rightTime:[],//右边时间
				right_current:'',//右边日期
				check:false,//协议
			}
		},
		onLoad() {
			this.getData();
		},
		
		created() {
			//生成时间
			//左边
			var now = new Date();
			this.leftDate.push("今天");
			this.leftDate.push("今明两天均可");
			this.leftDate.push("明天("+this.getDay(1)+")");
			this.leftDate.push("后天("+this.getDay(2)+")");
			this.leftDate.push(this.getDay(3));
			this.leftDate.push(this.getDay(4));
			this.leftDate.push(this.getDay(5));
			this.leftDate.push(this.getDay(6));
			
			this.selectDate("今天");
		},
		methods: {
			gotoProtocol(){
				uni.navigateTo({
					url:'/pages/main/article/index?id=1'
				})
			},
			clickProtocol(){
				this.check = !this.check;
			},
			changeStartTime(e){
				this.start_time = e;
			},
			bindPickerChange(e){
				console.info(e.detail.value)
				this.index = parseInt(e.detail.value)
				this.brand = this.cars[this.index];
				console.info(this.brand)
			},
			minusEvent(){
				if(this.num > 1){
					this.num--;
				}
			},
			addEvent(){
				if(this.num + 1 < 5){
					this.num++;
				}
			},
			cancelTime(){
				this.$refs.timepop.close();
			},
			confirmTime(){
				this.$refs.timepop.close();
				this.start_time = this.left_current + " " + this.right_current;
				
			},
			showSelectDate(){
				this.$refs.timepop.open('bottom');
			},
			selectDate(item){
				this.left_current = item;
				this.right_current = '';
				this.getTime(this.left_current);
			},
			selectTime(item){
				this.right_current = item;
			},
			getDay(add){
				var now = new Date();
				var month = now.getMonth()+1;
				if(month < 10){
					month = "0"+month;
				}
				var tomorrow = new Date(now);
				tomorrow.setDate(now.getDate()+add);
				var day = tomorrow.getDate();
				if(day < 10){
					day = "0"+day;
				}
				return month + '-' + day;
			},
			getTime(date){
				this.rightTime = []; 
				if(date == '今天'){
					// this.rightTime.push('自定义时间');
					this.rightTime.push('上午06:00-12:00');
					this.rightTime.push('下午12:00-18:00');
					this.rightTime.push('晚上18:00-24:00');
					this.rightTime.push('上午10:00');
					this.rightTime.push('上午11:00');
					this.rightTime.push('上午12:00');
					this.rightTime.push('下午13:00');
					this.rightTime.push('下午14:00');
					this.rightTime.push('下午15:00');
					this.rightTime.push('下午16:00');
					this.rightTime.push('下午17:00');
					this.rightTime.push('下午18:00');
					this.rightTime.push('晚上19:00');
					this.rightTime.push('晚上20:00');
					this.rightTime.push('晚上21:00');
					this.rightTime.push('晚上22:00');
					this.rightTime.push('晚上23:00');
					this.rightTime.push('晚上24:00');
				}else if(date == '今明两天均可'){
					this.rightTime.push('随到随装');
					this.rightTime.push('去前联系');
				}else{
					// this.rightTime.push('自定义时间');
					this.rightTime.push('凌晨00:00-06:00');
					this.rightTime.push('上午06:00-12:00');
					this.rightTime.push('下午12:00-18:00');
					this.rightTime.push('晚上18:00-24:00');
					this.rightTime.push('凌晨01:00');
					this.rightTime.push('凌晨02:00');
					this.rightTime.push('凌晨03:00');
					this.rightTime.push('凌晨04:00');
					this.rightTime.push('凌晨05:00');
					this.rightTime.push('凌晨06:00');
					this.rightTime.push('上午07:00');
					this.rightTime.push('上午08:00');
					this.rightTime.push('上午09:00');
					this.rightTime.push('上午10:00');
					this.rightTime.push('上午11:00');
					this.rightTime.push('上午12:00');
					this.rightTime.push('下午13:00');
					this.rightTime.push('下午14:00');
					this.rightTime.push('下午15:00');
					this.rightTime.push('下午16:00');
					this.rightTime.push('下午17:00');
					this.rightTime.push('下午18:00');
					this.rightTime.push('晚上19:00');
					this.rightTime.push('晚上20:00');
					this.rightTime.push('晚上21:00');
					this.rightTime.push('晚上22:00');
					this.rightTime.push('晚上23:00');
					this.rightTime.push('晚上24:00');
				}
			},
			//选择地址
			changeAddress(val){
				this.place = val.data.join('/');
			},
			changeAddress2(val){
				this.place2 = val.data.join('/');
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				car_list({}).then((res) => {
					let data = res.data.list;
					 console.info(data);
					 that.data = data;
					 let cars = [];
					 data.forEach(function(item){
						 cars.push(item['brand']);
					 });
					 that.cars = cars;
					uni.hideLoading();
				});
			},
			submitEvent(){
				
				if(this.place == '' || this.place.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择出发城市'
					})
					return;
				}
				if(this.place2 == '' || this.place2.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择目的城市'
					})
					return;
				}
				if(this.start_time.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择出发时间'
					})
					return;
				}
				if(this.brand.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择车型'
					})
					return;
				}
				if(this.amount == 0){
					uni.showToast({
						icon:'none',
						title:'请输入A费'
					})
					return;
				}
				if(!this.check){
					uni.showToast({
						icon:'none',
						title:'请仔细阅读并同意协议'
					})
					return;
				}
				let start = this.place.split('/');
				let params = {
					start_province:start[0],
					start_city:start[1],
					start_distinct:start[2],
					end_province:start[0],
					end_city:start[1],
					end_distinct:start[2],
					start_time:this.start_time,
					car_info:this.brand,
					location:this.num,
					amount:this.amount,
					remark:this.remark
				};
				console.info(params);
				uni.showLoading({
					title:'发布中...'
				});
				publish(params).then(res => {
					uni.hideLoading();
					if(res){
						uni.showToast({
							icon:'none',
							title:'发布成功'
						});
						setTimeout(function(){
							uni.navigateBack();
						},1000);
					}
					
				}).catch(err => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.main{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100;
			.add_main{
				display: flex;
				flex-direction: column;
				background-color: white;
				.temp_bg{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					background-color: blanchedalmond;
					height: 70rpx;
					.left{
						display: flex;
						flex-direction: row;
						align-items: center;
						.temp_icon{
							width: 30rpx;
							height: 30rpx;
							margin-left: 30rpx;
						}
						.temp_text{
							color: black;
							font-size: 28rpx;
							margin-left: 10rpx;
						}
					}
					.right{
						color: darkorange;
						font-size: 28rpx;
						margin-right: 20rpx;
					}
				}//temp_bg end
				.add-bg{
					display: flex;
					flex-direction: column;
					.section{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						height: 130rpx;
						.sec_left{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 30rpx;
							margin-right: 30rpx;
							flex:1;
							.sec_l_icon{
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background-color: #008CFF;
								color: white;
								border-radius: 6rpx;
								font-size: 20rpx;
							}
							.sec_l_icon_org{
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background-color: orange;
								color: white;
								border-radius: 6rpx;
								font-size: 20rpx;
							}
							.sec_l_text{
								color: gray;
								font-size: 30rpx;
								font-weight: bold;
								margin-left: 30rpx;
								width: 400rpx;
								height: 40rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						.sec_right{
							width: 100rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							.sec_r_icon{
								width: 30rpx;
								height: 30rpx;
							}
							.sec_r_text{
								color: gray;
								font-size: 28rpx;
							}
						}
					}//section end
					.line_bottom{
						border-bottom: 1rpx solid #f1f1f1;
					}
				}//add-bg end
				.add_desc{
					background-color: #f8f8f8;
					color: gray;
					font-size: 28rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.distance{
						color: orange;
					}
				}
			}//add_main end
			.goods_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				background-color: white;
				padding: 0rpx 30rpx;
				.goods_bg_left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 200rpx;
					.red{
						color: red;
					}
					.text{
						color: black;
						font-size: 28rpx;
					}
				}
				.goods_bg_right{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 30rpx;
					flex-wrap: nowrap;
					.goods_text{
						font-size: 28rpx;
						color: gray;
					}
					.goods_arrow{
						width: 26rpx;
						height: 26rpx;
					}
					.input{
						color: black;
						font-size: 28rpx;
						text-align: right;
						flex: 1;
					}
					.unit{
						font-size: 28rpx;
						color: black;
						margin-left: 15rpx;
					}
				}
			}//goods_bg end
			.bottom_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx 30rpx 30rpx 30rpx;
				.num_bg{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.title_bg{
						display: flex;
						flex-direction: row;
						.star{
							font-size: 28rpx;
							color: red;
						}
						.name{
							font-size: 28rpx;
							color: black;
						}
					}
					.section{
						display: flex;
						flex-direction: row;
						align-items: center;
						.minus{
							width: 70rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							background-color: #f2f2f2;
							text-align: center;
						}
						.num{
							width: 80rpx;
							font-size: 28rpx;
							background-color: #f2f2f2;
							text-align: center;
							height:70rpx;
							margin-left: 5rpx;
							margin-right: 5rpx;
							padding: 0rpx 20rpx;
						}
						.add{
							width: 70rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							background-color: #f2f2f2;
							text-align: center;
						}
					}
				}
			}
			.remark_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx;
				.up{
					display: flex;
					flex-direction: row;
					.red{
						color: red;
					}
					.text{
						color: black;
						font-size: 28rpx;
					}
				}
				.down{
					margin-top: 30rpx;
					.down_bg{
						border: 1rpx solid #f1f1f1;
						padding: 10rpx;
						.textarea{
							height: 80rpx;
							width: 100%;
							padding: 10rpx;
						}
					}
				}
			}//remark_bg end
			.protocol_bg{
				display: flex;
				flex-direction: row;
				margin-bottom: 200rpx;
				margin-top: 30rpx;
				align-items: center;
				.radio{
					width: 40rpx;
					height:40rpx;
				}
				.text{
					margin-left: 10rpx;
					color: #000000;
					font-size: 28rpx;
				}
				.role{
					color: red;
					font-size: 28rpx;
				}
			}//protocol_bg
		}//main end
		
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}// end footer
		/** 弹窗 **/
		.popup-cls{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					height: 40rpx;
				}
			}
			
			.center{
				margin-top: 30rpx;
				width:100%;
				padding: 0rpx 0rpx;
				display: flex;
				flex-direction: column;
				.warning{
					color: darkorange;
					font-size: 28rpx;
					padding: 0 30rpx;
				}
				.pop-content{
					display: flex;
					flex-direction: column;
					height: 700rpx;
					margin-top: 30rpx;
					.list{
						display: flex;
						flex-direction: column;
						.top{
							display: flex;
							flex-direction: row;
							padding: 0 30rpx;
							.red{
								color: red;
							}
							.title{
								font-size: 28rpx;
								font-weight: bold;
								color: black;
							}
							.desc{
								font-size: 28rpx;
								color: gray;
							}
						}
						.bottom{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							margin-top: 20rpx;
							// padding-left: 10rpx;
							.item{
								color: black;
								height:70rpx;
								line-height: 70rpx;
								margin-left: 30rpx;
								font-weight: bold;
							}
							.item-body{
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								margin-top: 20rpx;
								.item-i{
									width: 16%;
									background-color: #f2f2f2;
									color: black;
									text-align: center;
									height:60rpx;
									line-height: 60rpx;
									margin-bottom: 20rpx;
									border-radius: 10rpx;
									border: 1rpx solid #f2f2f2;
									margin-left: 20rpx;
								}
								.item_selected{
									border: 1rpx solid orange;
									background-color: blanchedalmond;
									color: orange;
								}
							}
							//不能选择
							.item_unselected{
								border: 1rpx solid #f2f2f2;
								background-color: #f2f2f2;
								color: gray;
							}
						}
					}
				}
				//pop-content
				.btn{
					background-color: $uni-main-color;
					color: white;
					font-size: 28rpx;
					height: 80rpx;
					width: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}//center
			
		}//popup-cls end
		
		/** 时间弹窗 **/
		.popup-cls2{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					padding-bottom: 30rpx;
					.cancel{
						font-size: 28rpx;
						color: dimgray;
						margin-left:30rpx;
						height: 60rpx;
						width: 130rpx;
						line-height: 60rpx;
					}
					.title{
						font-size: 30rpx;
						font-weight: bold;
					}
					.confirm{
						background-color: $uni-main-color;
						color: white;
						font-size: 28rpx;
						height: 60rpx;
						width: 130rpx;
						border-radius: 30rpx;
						line-height: 60rpx;
						margin-right:30rpx;
					}
				}
			}
			
			.center{
				width:100%;
				display: flex;
				flex-direction: column;
				.top_bg{
					background-color: oldlace;
					height: 80rpx;
					color: darkorange;
					font-size: 30rpx;
					line-height: 80rpx;
					padding-left: 30rpx;
				}
				.pop-content{
					padding: 0rpx 30rpx;
					display: flex;
					flex-direction: row;
					height: 500rpx;
					.left{
						width: 280rpx;
						background-color: #f8f8f8;
						.section{
							padding-left: 30rpx;
							height: 80rpx;
							color: black;
							font-size: 28rpx;
							background-color: transparent;
							line-height: 80rpx;
						}
						.selected{
							background-color: white;
							color: darkorange;
							font-weight: bold;
						}
					}
					.right{
						margin-left: 30rpx;
						flex: 1;
						background-color: white;
						.section{
							height: 80rpx;
							color: black;
							font-size: 28rpx;
							line-height: 80rpx;
						}
						.selected{
							background-color: white;
							color: darkorange;
							font-weight: bold;
						}
					}
				}
			}
			
		}//popup-cls2 end
	}
	
</style>
